<template>
	<view class="">
		<view class="tips">请确保您填写资料的准确性，以便我方和您取得联系！</view>
		<view class="address-form">
			<form @submit="formSubmit">

				<view class="label-input">
					<text>融资主体</text>
					<input placeholder-style="font-size:28rpx" maxlength="64" v-model="companyName"
						@keyup="companyName=companyName.replace(/\s+/g,'')" placeholder="企业名称或您的姓名(必填)" />

				</view>
				<view class="label-input">
					<text>所在地区</text>
					<region-picker style="width:100%" @change="region_change" :value="[0,0,0]">
						<view class="region">
							{{address?address:'省、市、区(必选)'}}
							<image src="@/static/Chevron.png" mode=""></image>
						</view>
					</region-picker>
				</view>
				<view class="label-input isMargin">
					<text>融资金额</text>
					<input placeholder-style="font-size:28rpx" type="number" maxlength="11"
						@keyup.native="adjustMaxLen($event)" v-model="financingAmount" placeholder="融资金额(必填)" />
					<text style="width: 140rpx;">万元</text>
				</view>
				<view class="label-input">
					<text>融资期限</text>
					<input placeholder-style="font-size:28rpx" maxlength="16" v-model="financingPeriod"
						placeholder="请输入(必填)" />

				</view>
				<view class="label-input">
					<text>融资方式</text>
					<checkbox-group @change="checkboxChange" style="flex: auto;">
						<checkbox value="1" :checked="financingMethod.includes('1')">股权融资</checkbox>
						<checkbox value="2" :checked="financingMethod.includes('2')">债权融资</checkbox>
						<checkbox value="3" :checked="financingMethod.includes('3')">其他</checkbox>
					</checkbox-group>
				</view>
				<view class="label-input ">
					<text class="area">融资用途</text>
					<textarea auto-height style="margin: 0 16rpx;" maxlength="100"
						@keyup="financingPurpose=financingPurpose.replace(/\s+/g,'')" v-model="financingPurpose"
						placeholder="请输入(必填)" />
				</view>

				<view class="label-input isMargin">
					<text>联系人</text>
					<input placeholder-style="font-size:28rpx" maxlength="16"
						@keyup="realName=realName.replace(/\s+/g,'')" v-model="realName" placeholder="姓名(必填)" />
				</view>
				<view class="label-input ">
					<text>联系方式</text>
					<input placeholder-style="font-size:28rpx" maxlength="11" type="number"
						@keyup="contactNumber=contactNumber.replace(/\s+/g,'')" v-model="contactNumber"
						placeholder="联系电话(必填)" />
				</view>

				<view class="label-input isMargin" @click="checkVip">
					<text>是否会员</text>
					<input placeholder-style="font-size:28rpx" disabled maxlength="200" v-model="member"
						placeholder="请选择(必填)" />
					<image src="@/static/Chevron.png" mode=""></image>
				</view>
				<view class="label-input isMargin">
					<text>我的邀请人</text>
					<input placeholder-style="font-size:28rpx" maxlength="16"
						@keyup="inviterRealName=inviterRealName.replace(/\s+/g,'')" v-model="inviterRealName"
						placeholder="请输入" />
				</view>
				<view class="label-input isMargin">
					<text class="area">备注</text>
					<textarea auto-height style="margin: 0 16rpx;" maxlength="200"
						@keyup="applyRemark=applyRemark.replace(/\s+/g,'')" v-model="applyRemark" placeholder="请输入" />
				</view>
			</form>
		</view>
		<view class="footer">
			<button type="primary" class="back-btn" @click="back">返回</button>
			<button type="primary" @click="submit" :style="{background:(inputAll?'#0B4E9E':'#CCCCCC')}">确定</button>
		</view>

	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker.vue"
	import api from 'api/modules/findCapital.js';
	export default {
		name: 'HaveCapital',
		components: {
			regionPicker
		},
		computed: {
			inputAll: function() {
				if (this.address &&
					this.companyName &&
					this.financingAmount &&
					this.contactNumber &&
					this.financingPeriod &&
					this.financingMethod.length &&
					this.financingPurpose &&
					this.member &&
					this.realName) {
					return true
				}
				return false
			}
		},
		onLoad(params) {
			if (params) {
				this.funderId = params.funderId
			}
		},
		data() {
			return {
				address: '', // 地址拼接
				applyRemark: '', //备注
				provinceName: '',
				cityName: '',
				districtName: '',
				companyName: "", //融资主体
				contactNumber: '',
				financingAmount: '',
				financingMethod: [],
				financingPeriod: '',
				financingPurpose: '',
				funderId: '',
				member: '',
				realName: '',
				inviterRealName: ""
			}
		},
		mounted() {

		},
		methods: {
			region_change(val) {
				if (val) {
					this.provinceName = val.detail.value[0]
					this.cityName = val.detail.value[1]
					this.districtName = val.detail.value[2]
					this.address = this.provinceName + '-' + this.cityName + '-' + this.districtName
				}
			},
			adjustMaxLen(el, maxlength = 8) {
				el.target.value = el.target.value.replace(/^(\d+)\.(\d\d).*$/, "$1.$2"); //只能输入2个小数
				el.target.value = el.target.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符，只能输入正整数
				el.target.value = el.target.value.replace(/^\./g, ""); //验证第一个字符是数字而不是其他的
				el.target.value = el.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				el.target.value = el.target.value
					.replace(".", "$#$")
					.replace(/\./g, "")
					.replace("$#$", "."); //保证.只出现一次，而不能出现两次以上

				if (el.target.value.length > maxlength) {
					if (!el.target.value.includes(".")) {
						this.financingAmount = el.target.value.slice(0, 8);
					} else {
						this.financingAmount = el.target.value.slice(0, 11);
					}
				} else {
					if (el.target.value.includes(".")) {
						el.target.value = el.target.value.slice(0, el.target.value.length);
						this.financingAmount = el.target.value.slice(
							0,
							el.target.value.length
						);
					}
				}
			},
			checkboxChange(val) {
				this.financingMethod = val.detail.value
			},
			checkVip() {
				uni.showActionSheet({
					itemList: ['是', '否'],
					success: (res) => {
						this.member = res.tapIndex == 0 ? '是' : '否'
					},

				});
			},
			back() {
				uni.navigateBack()
			},
			submit() {
				if (!this.inputAll) {
					return
				} else {
					if (!/^1([3456789])\d{9}$/.test(this.contactNumber)) {
						uni.showToast({
							title: '联系方式错误',
							icon: 'none'
						})
						return
					}
					api.applyFunder({
						applyRemark: this.applyRemark, //备注
						provinceName: this.provinceName,
						cityName: this.cityName,
						districtName: this.districtName,
						companyName: this.companyName, //融资主体
						contactNumber: this.contactNumber,
						financingAmount: this.financingAmount,
						financingMethod: this.financingMethod,
						financingPeriod: this.financingPeriod,
						financingPurpose: this.financingPurpose,
						funderId: this.funderId,
						member: this.member == '是' ? true : false,
						realName: this.realName,
						inviterRealName: this.inviterRealName
					}).then(res => {

						this.address = '', // 地址拼接
							this.applyRemark = '', //备注
							this.provinceName = '',
							this.cityName = '',
							this.districtName = '',
							this.companyName = "", //融资主体
							this.contactNumber = '',
							this.financingAmount = '',
							this.financingMethod = [],
							this.financingPeriod = '',
							this.financingPurpose = '',
							this.funderId = '',
							this.member = '',
							this.realName = ''
						this.inviterRealName = ''
					})
					uni.showToast({
						title: '申请成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/views/service/tourong/Index'
						})
					}, 1500)
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F6F6F6;
	}

	/deep/ .uni-checkbox-input {
		width: 24rpx;
		height: 24rpx;
	}

	/deep/.uni-checkbox-wrapper {
		font-size: 28rpx;
		color: #666666;
		margin-right: 20rpx;
	}

	/deep/ .uni-checkbox-input-checked {
		color: #FFFFFF !important;
		background-color: #007aff;
		width: 24rpx;
		height: 24rpx;

		&::before {
			font-size: 24rpx !important;
		}
	}

	.tips {
		border-top: 1rpx solid #fff;
		padding: 20rpx 24rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.region {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer {
		box-sizing: border-box;
		width: 100%;
		display: flex;

		button {
			margin: 24rpx auto;
			height: 80rpx;
			width: 200rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;

			&::after {
				border: 0;
			}
		}
	}
</style>
